<!--  -->
<template>
  <div
    class="diyRecommend"
    v-loading="isLoading"
    element-loading-text="加载中..."
  >
    <!-- 轮播图 -->
    <div class="banners">
      <Banner :bannerInfo="bannerInfo"></Banner>
    </div>

    <!-- 推荐歌单 -->
    <p>推荐歌单</p>
    <div class="recomSong">
      <RecomSong :recomSongList="recomSongList"></RecomSong>
    </div>

    <!-- 独家放送 -->
    <p>独家放送</p>
    <div class="privateRec">
      <PrivateRec :privateList="privateList"></PrivateRec>
    </div>

    <!-- 最新音乐 -->
    <p>最新音乐</p>

    <div class="newSong">
      <NewSong :newSongList="newSongList"></NewSong>
    </div>

    <!-- 推荐mv -->
    <p>推荐MV</p>

    <div class="mvRecom">
      <MvRecom :mvRecomList="mvRecomList"></MvRecom>
    </div>
  </div>
</template>

<script>
import Banner from "components/findMusic/recommend/Banner.vue";
import RecomSong from "components/findMusic/recommend/RecomSong.vue";
import PrivateRec from "components/findMusic/recommend/PrivateRec.vue";
import NewSong from "components/findMusic/recommend/NewSong.vue";
import MvRecom from "components/findMusic/recommend/MvRecom.vue";
import { mapGetters } from "vuex";

import {
  getBanner,
  getRec,
  getPrivate,
  getNewSong,
  getMvRecomList,
} from "util/findMusic.js";
export default {
  name: "",
  data() {
    return {
      //轮播图信息
      bannerInfo: [],
      //推荐歌单列表
      recomSongList: [],
      // 独家放送列表
      privateList: [],
      // 最新音乐列表
      newSongList: [],
      //mv推荐列表
      mvRecomList: [],
      //播放的音乐url
      misicUrl: "",
      // 音乐详情
      musicDetail: {},
    };
  },
  components: {
    Banner,
    RecomSong,
    PrivateRec,
    NewSong,
    MvRecom,
  },
  created() {
    //调用轮播图方法
    this.getBanner();
    //调用推荐歌单方法
    this.getRec();
    //调用独家放送方法
    this.getPrivate();
    //调用最新音乐
    this.getNewSong();
    //调用推荐mv方法
    this.getMvRecomList();
  },
  computed: {
    ...mapGetters("musicPlay", [
      // 加载状态
      "isLoading",
    ]),
  },
  methods: {
    //获取轮播图信息
    async getBanner() {
      let { data } = await getBanner();
      //   console.log(data);
      this.bannerInfo = data.banners;
    },
    //获取推荐歌单信息
    async getRec() {
      let { data } = await getRec();
      //   console.log(data);
      this.recomSongList = data.playlists;
    },
    //获取独家放送信息
    async getPrivate() {
      let { data } = await getPrivate();
        // console.log(data);
      this.privateList = data.result;
    },
    //获取最新音乐信息
    async getNewSong() {
      let { data } = await getNewSong();
      //   console.log(data);
      this.newSongList = data.result;
    },
    //获取mv推荐
    async getMvRecomList() {
      let {
        data: { result },
      } = await getMvRecomList();
      // console.log(data);
      this.mvRecomList = result;
    },
  },
};
</script>

<style lang='less' scoped>
.diyRecommend {
  padding: 0 5.25rem;

  p {
    font-size: 30px;
    font-weight: 600;
    padding: 20px 10px;
  }
}
</style>